<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js CDN Example</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <!-- 引入 Vue 3 -->
    <script src="./lib/vue3.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <!-- 这里将渲染 Three.js 场景 -->
    <script type="module">
        const { createApp } = Vue;
        // 通过 CDN 引入 Three.js 的 ES6 模块版本
        import * as THREE from 'https://unpkg.com/three@0.158.0/build/three.module.js';

        createApp({
            data() {
                return {
                    message: '欢迎使用 Vue!',
                };
            },
            created() {
                // 初始化非响应式的 Three.js 相关属性
                this.three = {
                    scene: null,
                    camera: null,
                    renderer: null,
                    cube: null
                };
            },
            mounted() {
                this.init();
            },
            methods: {
                init() {
                    // 初始化场景
                    this.three.scene = new THREE.Scene();

                    // 初始化相机
                    this.three.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
                    this.three.camera.position.z = 5;

                    // 初始化渲染器
                    this.three.renderer = new THREE.WebGLRenderer();
                    this.three.renderer.setSize(window.innerWidth, window.innerHeight);
                    document.body.appendChild(this.three.renderer.domElement);

                    // 创建几何体（这里是一个立方体）
                    const geometry = new THREE.BoxGeometry();
                    // 创建材质
                    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
                    // 创建网格对象（将几何体和材质组合）
                    this.three.cube = new THREE.Mesh(geometry, material);
                    // 将立方体添加到场景中
                    this.three.scene.add(this.three.cube);

                    // 渲染循环函数
                    const animate = () => {
                        requestAnimationFrame(animate);

                        // 让立方体在 x 和 y 轴上旋转
                        this.three.cube.rotation.x += 0.01;
                        this.three.cube.rotation.y += 0.01;

                        // 渲染场景和相机
                        this.three.renderer.render(this.three.scene, this.three.camera);
                    };

                    // 启动渲染循环
                    animate();
                }
            }
        }).mount('#app');
    </script>
</body>

</html>